<template>
  <div class="register">
    <h1>中小学作业系统</h1>
    <div class="register_content">
      <h2>学生注册</h2>

      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item class="white" label="用户名:" prop="st_name">
          <el-input
            type="text"
            v-model="ruleForm.st_name"
            placeholder="请输入用户名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="white" label="手机号:" prop="st_phone">
          <el-input
            type="text"
            v-model="ruleForm.st_phone"
            placeholder="请输入手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="white" label="年级:" prop="st_year">
          <el-cascader v-model="value" :options="grade_options" />
        </el-form-item>
        <el-form-item class="white" label="性别:" prop="st_sex">
          <el-radio v-model="ruleForm.st_sex" label="0">女</el-radio>
          <el-radio v-model="ruleForm.st_sex" label="1">男</el-radio>
        </el-form-item>
        <el-form-item class="white" label="密码:" prop="st_password">
          <el-input
            :type="pwdType"
            v-model="ruleForm.st_password"
            placeholder="请输入密码"
            autocomplete="off"
            clearable
          >
            <i
              slot="suffix"
              class="el-icon-view"
              @click="showPwd"
              v-if="ruleForm.st_password"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="register-button"
            @click="submitForm('ruleForm')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
      <router-link to="/">
        <span>使用已有账户登录</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    let checkname = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("用户名不能为空"));
      }
      callback();
    };
    let checkmobile = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else if (!this.isCellPhone(value)) {
        callback(new Error("请正确输入11位的手机号!"));
      } else {
        callback();
      }
    };
    let validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else {
        if (this.ruleForm.checkPassword !== "") {
          this.$refs.ruleForm.validateField("checkPassword");
        }
        callback();
      }
    };
    return {
      value: [],
      grade_options: [
        {
          value: "一年级",
          label: "一年级",
        },
        {
          value: "二年级",
          label: "二年级",
        },
        {
          value: "三年级",
          label: "三年级",
        },
        {
          value: "四年级",
          label: "四年级",
        },
        {
          value: "五年级",
          label: "五年级",
        },
        {
          value: "六年级",
          label: "六年级",
        },
        {
          value: "初一",
          label: "初一",
        },
        {
          value: "初二",
          label: "初二",
        },
        {
          value: "初三",
          label: "初三",
        },
      ],
      pwdType: "password",
      ruleForm: {
        st_name: "",
        st_phone: "",
        st_sex: "",
        st_password: "",
      },
      rules: {
        st_name: [
          {
            required: false,
            validator: checkname,
            trigger: "blur",
          },
        ],
        st_phone: [
          {
            required: true,
            validator: checkmobile,
            trigger: "blur",
          },
        ],
        st_password: [
          {
            required: true,
            message: "密码不能为空",
            validator: validatePassword,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let st_name = this.ruleForm.st_name;
          let st_phone = this.ruleForm.st_phone;
          let st_sex = this.ruleForm.st_sex;
          let st_password = this.ruleForm.st_password;
          let st_year = this.value;
          console.log(st_year);
          this.axios
            .get(
              "http://10.197.43.62:8088/student/register?st_name=" +
                st_name +
                "&st_phone=" +
                st_phone +
                "&st_password=" +
                st_password +
                "&st_sex=" +
                st_sex +
                "&st_year=" +
                st_year
            )
            .then((res) => {
              console.log("注册提示：");
              console.log(res.data.msg);
              if (res.data.data === 1) {
                this.$message({
                  message: "恭喜你，注册成功！",
                  type: "success",
                });
              } else {
                this.$message({
                  message: "注册失败,请重新输入!",
                  type: "danger",
                });
              }
              this.$router.push("/");
            });
        }
      });
    },
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
    showPwd() {
      this.pwdType === "password"
        ? (this.pwdType = "")
        : (this.pwdType = "password");
      let e = document.getElementsByClassName("el-icon-view")[0];
      this.pwdType == ""
        ? e.setAttribute("style", "color: #409EFF")
        : e.setAttribute("style", "color: #c0c4cc");
    },
  },
  created() {},
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

/*  */
.register {
  z-index: -1;
  width: 100%;
  background-image: url(../assets/img/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  background-size: cover;
  min-height: 100vh;
  position: absolute;
}

/*  */
h1 {
  font-size: 55px;
  text-align: center;
  padding-top: 1%;
}

.register_content {
  z-index: 1;
  background-color: #fff;
  padding: 20px;
  padding-right: 40px;
  border-radius: 10px;
  /* div居中 */
  width: 300px;
  margin: 0 auto;
  /*  */
  margin-top: 4%;
}

.el-button {
  width: 150px;
  height: 40px;
  margin: 0 auto;
}

/*  */
h2 {
  font-size: 30px;
  text-align: center;
  padding-bottom: 5%;
}
</style>